import React, { useCallback, useEffect, useRef, useState } from "react"
import "./App.less"
import Link from "./Components/Link"
import Swiper, { SwiperItem } from "./Components/Swiper"
import Toast from "./Components/Toast"
import { list, yueduList, acfunList } from "./constant"

export default function App() {
    useEffect(() => {
        document.body.style.minWidth = "1200px"
        return () => {
            document.body.style.minWidth = "0"
        }
    }, [])

    const [show, setShow] = useState(false)

    const wrapper = useRef<HTMLDivElement>(null)

    const yuedu = useRef<HTMLDivElement>(null)

    const acfun = useRef<HTMLDivElement>(null)

    const lolalytics = useRef<HTMLDivElement>(null)

    const [now, setNow] = useState("")

    const [showMini, setShowMini] = useState(false)

    const scroll: React.UIEventHandler<HTMLDivElement> = useCallback(e => {
        const yueduTop = yuedu.current!.offsetTop
        const acfunTop = acfun.current!.offsetTop
        const lolalyticsTop = lolalytics.current!.offsetTop
        const { scrollTop } = e.target as HTMLDivElement
        setShow(scrollTop > yueduTop)
        if (scrollTop >= lolalyticsTop - 2) {
            setNow("lolalytics")
            return
        }
        if (scrollTop >= acfunTop - 2) {
            setNow("acfun")
            return
        }
        if (scrollTop >= yueduTop - 2) {
            setNow("yuedu")
            return
        }
        setNow("")
    }, [])

    const scrollToTop = useCallback(() => {
        wrapper.current!.scrollTo({
            top: 0,
            behavior: "smooth"
        })
    }, [])

    const scrollToYuedu = useCallback(() => {
        wrapper.current!.scrollTo({
            top: yuedu.current!.offsetTop,
            behavior: "smooth"
        })
    }, [])

    const scrollToAcfun = useCallback(() => {
        wrapper.current!.scrollTo({
            top: acfun.current!.offsetTop,
            behavior: "smooth"
        })
    }, [])

    const scrollToLolalytics = useCallback(() => {
        wrapper.current!.scrollTo({
            top: lolalytics.current!.offsetTop,
            behavior: "smooth"
        })
    }, [])

    const timer = useRef<NodeJS.Timeout | undefined>(undefined)

    const clickCode = useCallback(() => {
        if (timer.current) {
            clearTimeout(timer.current)
        }
        setShowMini(true)
        timer.current = setTimeout(() => {
            setShowMini(false)
        }, 3000)
    }, [])

    return (
        <div ref={wrapper} className="wrapper" onScroll={scroll}>
            {/* <Toast /> */}
            <div className="toolbar" style={{ display: show ? "flex" : "none" }}>
                <div className="go-item top" style={{ backgroundImage: "url(/top.png)" }} onClick={scrollToTop}></div>
                <div
                    className="go-item yuedu"
                    style={{
                        backgroundImage: "url(/yuedu.png)",
                        filter: `grayscale(${now === "yuedu" ? 0 : 1})`
                    }}
                    onClick={scrollToYuedu}></div>
                <div
                    className="go-item acfun"
                    style={{
                        backgroundImage: "url(/acfun-icon.webp)",
                        filter: `grayscale(${now === "acfun" ? 0 : 1})`
                    }}
                    onClick={scrollToAcfun}></div>
                <div
                    className="go-item lolalytics"
                    style={{
                        backgroundImage: "url(/lolalytics.png)",
                        filter: `grayscale(${now === "lolalytics" ? 0 : 1})`
                    }}
                    onClick={scrollToLolalytics}></div>
            </div>
            <div className="head" id="head">
                <div className="logo">
                    <img className="logo-image" src="/logo.webp" alt="logo" />
                    <div className="logo-name">陆荣 · 前端</div>
                </div>
                <div className="meun">
                    <Link href={list.github} className="meun-item" left={false} right={false}>
                        Github
                    </Link>
                    <div className="meun-item" onClick={scrollToYuedu}>
                        Yuedu
                    </div>
                    <div className="meun-item" onClick={scrollToAcfun}>
                        AcFun TV
                    </div>
                    <div className="meun-item" onClick={scrollToLolalytics}>
                        LOLAlytics
                    </div>
                </div>
            </div>
            <div className="main">
                <div className="intrd">
                    <img src="/logo.webp" alt="主图" className="intrd-image" />
                    <div className="intrd-content">
                        <div className="intrd-hello">你好，</div>
                        <div className="intrd-text">
                            <p>
                                我叫陆荣，毕业于
                                <Link href={list.nku}>南开大学</Link>
                            </p>
                            <p>
                                自学前端，热爱
                                <Link href={list.js}>JavaScript</Link>、
                            </p>
                            <p>
                                <Link href={list.ts} left={false}>
                                    TypeScript
                                </Link>
                                以及
                                <Link href={list.react}>React.js</Link>
                            </p>
                        </div>
                    </div>
                </div>
                <div className="line"></div>
                <div className="project" ref={yuedu}>
                    <div className="project-head">
                        <div className="project-name">
                            <div className="main-name yuedu">仙人掌阅读</div>
                            <div className="sub-name">综合性的新闻网站，包含前台、后台以及后端</div>
                        </div>
                        <div className="project-content">
                            <div className="project-text">想要尝试把自己已学的大部分技术融合出来，做一个综合性的项目，于是便做了这么一个包含了前台、后台以及后端的新闻网站</div>
                            <Link href={list.yuedu} className="project-view">
                                <img className="view-icon" src="/web.svg" />
                                <div className="project-link">查看项目</div>
                                <img className="arrow-right" src="/arrow-right.png" />
                            </Link>
                        </div>
                    </div>
                    <div className="project-swiper">
                        <Swiper data={yueduList} width={880} height={495} interval={5000} />
                    </div>

                    <div className="project-result">
                        <div className="result-title">项目总结：</div>
                        <div className="result-content">
                            <p>
                                前台技术栈：
                                <Link href={list.ts} left={false}>
                                    TypeScript
                                </Link>
                                +<Link href={list.react}>React</Link>+<Link href={list.tvos}>React Router</Link>+<Link href={list.axios}>Axios</Link>+<Link href={list.mobx}>MobX</Link>+<Link href={list.antd}>Ant Design</Link>
                            </p>
                            <p>
                                后台技术栈：
                                <Link href={list.ts} left={false}>
                                    TypeScript
                                </Link>
                                +<Link href={list.umi}>Umi</Link>+<Link href={list.antd}>Ant Design</Link>+<Link href={list.antv}>Ant Design Charts</Link>+<Link href={list.wang}>WangEditor</Link>
                            </p>
                            <p>
                                后端技术栈：
                                <Link href={list.ts} left={false}>
                                    Node
                                </Link>
                                +<Link href={list.ts}>TypeScript</Link>+<Link href={list.express}>Express</Link>+<Link href={list.mysql}>MySQL</Link>+<Link href={list.jwt}>JSON Web Token</Link>
                            </p>
                            <p>前后端分离的通点在于接口类型，由于都是使用 TypeScript 进行开发，所以可以共享一套 d.ts 文件实现类型通用</p>
                            <p>前端对 Axios 和 UmiRequest 分别进行了二次封装，能够自动识别出接口返回的 TypeScript 类型</p>
                            <p>后端对 Express 进行了二次封装，约束接口必须发送符合类型的数据</p>
                            <p>
                                在写项目过程中，为了解决出现的问题和需求写了两个
                                <Link href={list.npm}>
                                    <img src="/npm.png" alt="NPM" className="npm" />
                                    NPM 库
                                </Link>
                            </p>
                            <p className="no-dot">
                                —<Link href={list.html2jsx}>Convert-HTML-To-JSX</Link>
                                ，将 HTML 代码转换为自定义组件，比如 Ant Design 或者 React Native 中的组件
                            </p>
                            <p className="no-dot">
                                —<Link href={list.easymysqltools}>Easy-MySQL-Tools</Link>
                                ，基于 MySQL2 进行二次封装，能够自动识别数据库操作的类型，并可以对查询配置进行代码提示
                            </p>
                        </div>
                    </div>
                </div>
                <div className="line"></div>
                <div className="project" ref={acfun}>
                    <div className="project-head">
                        <div className="project-name">
                            <div className="main-name acfun">AcFun TV</div>
                            <div className="sub-name">知名弹幕网站 AcFun 的 Android TV 版本 APP</div>
                        </div>
                        <div className="project-content">
                            <div className="project-text">
                                <Link href={list.acfun} left={false}>
                                    AcFun 弹幕视频网
                                </Link>
                                并无 TV 版，于是利用
                                <Link href={list.rn} left={false}>
                                    React Native
                                </Link>
                                开发了一个 Android TV 版本APP，支持遥控，视频播放、弹幕等功能
                            </div>
                            <Link href={list.actv} className="project-view">
                                <img className="view-icon" src="/github.png" />
                                <div className="project-link">查看项目</div>
                                <img className="arrow-right" src="/arrow-right.png" />
                            </Link>
                        </div>
                    </div>
                    <div className="project-swiper">
                        <Swiper data={acfunList} width={880} height={495} interval={5000} />
                    </div>
                    <div className="project-result">
                        <div className="result-title">项目总结：</div>
                        <div className="result-content">
                            <p>
                                技术栈：
                                <Link href={list.tvos} left={false}>
                                    React Native TVOS
                                </Link>
                                +<Link href={list.tvos}>React Navigation</Link>+<Link href={list.tvos}>React Native Video</Link>+<Link href={list.tvos}>React Native Webview</Link>+<Link href={list.mobx}>MobX</Link>
                            </p>
                            <p>国内的 React Native 知识基本全部过时，用来开发 Android TV 的相关信息更是几乎为零，遇到问题只能自己不断地调试，以及在 Google 或者 StackOverflow 上搜索</p>
                            <p>遇到一个电视设备无法正确被识别为 TV 的问题，反复调试无法解决，最终修改了 React Native 源码中的一个方法，成功解决</p>
                            <p>
                                React Native 中没有可用的弹幕库，自己尝试利用 React Native 的原生动画 API 编写了
                                <Link href={list.danmu} left={false}>
                                    React-Native-Danmaku-Player
                                </Link>
                                ，显示效果和性能都很好
                            </p>
                            <p>
                                <Link href={list.acvideo} left={false}>
                                    相关视频
                                </Link>
                                在 AcFun 获得极高关注，<b>占据热度以及播放排行榜第一长达一个多月</b>
                            </p>
                        </div>
                    </div>
                </div>
                <div className="line"></div>
                <div className="project" ref={lolalytics}>
                    <div className="project-head">
                        <div className="project-name">
                            <div className="main-name lolalytics">乱斗宝典</div>
                            <div className="sub-name">知名数据网站 lolalytics 的小程序版本</div>
                        </div>
                        <div className="project-content">
                            <div className="project-text">
                                <a href="https://lolalytics.com/lol/tierlist/" target="_blank" rel="noreferrer">
                                    LOLAlytics
                                </a>
                                &nbsp;数据网站在国内访问较慢，部分的确甚至无法访问，于是开发了微信小程序的版本，数据每天自动同步更新
                            </div>
                            <div className="project-view" onClick={clickCode}>
                                <img className="view-icon" src="/mini-app.png" />
                                <div className="project-link">
                                    查看项目
                                    <div
                                        className="toast"
                                        style={{
                                            display: showMini ? "block" : "none"
                                        }}>
                                        <img className="toast-bg" src="/pop.png" alt="气泡" />
                                        <img src="/code.webp" alt="小程序码" className="code" />
                                    </div>
                                </div>
                                <img className="arrow-right" src="/arrow-right.png" />
                            </div>
                        </div>
                    </div>
                    <div className="mobile-list">
                        <div className="phone-wrapper">
                            <img className="phone-screen" src="/phone_0.webp" />
                        </div>
                        <div className="phone-wrapper">
                            <img className="phone-screen" src="/phone_1.webp" />
                        </div>
                        <div className="phone-wrapper">
                            <img className="phone-screen" src="/phone_2.webp" />
                        </div>
                    </div>
                    <div className="project-result">
                        <div className="result-title">项目总结：</div>
                        <div className="result-content">
                            <p>
                                技术栈：
                                <Link href={list.ts} left={false}>
                                    TypeScript
                                </Link>
                                +<Link href={list.taro}>Taro</Link>+<Link href={list.wxcloud}>Serverless</Link>+<Link href={list.puppeteer}>Puppeteer</Link>
                            </p>
                            <p>Taro 的部分 API 与微信小程序不一致</p>
                            <p>使用虚拟列表解决了子元素过多时加载白屏和滚动卡顿的问题</p>
                            <p>
                                原网站的数据加密，使用
                                <Link href={list.puppeteer}>Puppeteer</Link>
                                无头浏览器进行爬取数据，同步更新
                            </p>
                            <p>累计用户近 300 余人</p>
                        </div>
                    </div>
                </div>
                <div className="line"></div>
                <div className="contact">
                    <div className="contact-title">联系 · 我</div>
                    <div className="contact-list">
                        <a href="https://github.com/1adybug" target="_blank" rel="noreferrer" className="contact-link">
                            <img className="contact-icon" src="/github.png" />
                            <div className="contact-type">github.com/1adybug</div>
                        </a>
                        <a href="mailto:lurongv@qq.com" target="_blank" rel="noreferrer" className="contact-link">
                            <img className="contact-icon" src="/mail.png" />
                            <div className="contact-type">lurongv#qq.com</div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    )
}
